<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<script src="js/jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/flexible.js" type="text/javascript" charset="utf-8"></script>
		<title></title>
	     <style type="text/css">
	     	*{
	     		margin: 0;
	     		padding: 0;
	     	}
	     	li{
	     		list-style: none;
	     	}
	     	a{
	     		text-decoration: none;
	     	}
			
	     	.nav{
	     		width: 100%;
	     		height: 1.8rem;
	     		display: flex;
	     		position: fixed;
	     		align-items: center;
	     		top: 0;
	     		background: url(img/nav.png);
	     		background-repeat: no-repeat;
	     		background-size: 100% 100%;
	     	}
	     	.nav img{
	     		position: absolute;
	     		height: 1rem;
	     		width: 0.6rem;
	     		margin-left: 1rem;
	     	}
	     	.nav p{
	     		width: 100%;
	     		height: 100%;
	     		text-align: center;
	     		font-size: 0.6rem;
	     		line-height: 1.8rem;
	     		color: white;
	     	}
			ul{
				width: 100%;
				height: auto;
				margin-top: 1.8rem!important;
				display: flex;
				justify-content: center;
				flex-wrap: wrap;
			}
			ul>li{
				width: 8.8rem;
				height: 1.8rem;
				border-bottom: 1px solid #e5e5e5;
				line-height: 1.8rem;
				margin-bottom: 0.8rem;
			}
			li>span{
				display: inline-block;
				width: 2rem;
			}
			input[name="yzm"]{
				width: 6rem;
				border-right: 1px solid #000000;
				box-sizing: border-box;
				padding-left: 0.3rem;
			}
			li>button{
				background: transparent;
				border: none;
				cursor: pointer;
				color: dimgrey;
				}
			.dl{
				width: 6rem;
				height: 1.5rem;
				border-radius:0.2rem ;
				background: #ff3333;
				color: white;
				margin-top: 1.5rem;
			}	
	     </style>
	</head>
	<body>
		<div class="box">
			<div class="nav">
				<img src="img/fanhui@2x.png" >
				<p>
					忘记密码
				</p>
			</div>
			<ul>
				<li>
					<input type="text" placeholder="请输入您的手机号">
				</li>
				<li>
					<input type="text" name="yzm" placeholder="输入验证码"/>
					<button>
						获取验证码
					</button>
				</li>
				<li>
					<input type="text" placeholder="请输入6-20位新密码">
				</li>
				<li>
					<input type="text" placeholder="请再次输入新密码">
				</li>
				<button class="dl">
					登录
				</button>
			</ul>
			
			<script type="text/javascript">
				function TagName(tag){
						return document.getElementsByTagName(tag)
					}
					var btn=TagName("button")[0]
					var inp=TagName("input")[1]
					
				// 验证码数组
					
					var gg=["1","2","3","4","5","6","7","8","9","0",]
					var dd=["1","2","3","4","5","6","7","8","9","0",]
					var ee=["1","2","3","4","5","6","7","8","9","0",]
					var ff=["1","2","3","4","5","6","7","8","9","0",]
					var bb=["1","2","3","4","5","6","7","8","9","0",]
					var ab=["33","55","88","66","44",]
					var cc=["a","b","c","d","e","f",]
					
				// 定时器倒计时
					
					btn.onclick=function(){
						var gg1=Math.floor(Math.random()*gg.length)
						var ff1=Math.floor(Math.random()*ff.length)
						var ee1=Math.floor(Math.random()*ee.length)
						var dd1=Math.floor(Math.random()*dd.length)
						var aa1=Math.floor(Math.random()*ab.length)
						var bb1=Math.floor(Math.random()*bb.length)
						var cc1=Math.floor(Math.random()*cc.length)
						var a=30;
						function aa(){
							timer=setInterval(function(){
								 a--;
								  inp.value=a+"s"
								if(a<=0){
									 clearInterval(timer)
									 inp.value=bb[bb1]+cc[cc1]+ab[aa1]+dd[dd1]+ee[ee1]+ff[ff1]+gg[gg1]
								 }
							},1000)
						}
						aa();
					}
				
				
				
			</script>
		</div>
	</body>
</html>
